import React, { Component } from "react";
// import store from "./store";

// 第二步：引入connect
// connect是一个函数，它的返回值是一个高阶组件
// connect函数需要接收两个参数,是两个函数
import { connect } from "react-redux";

// 将仓库的state映射到组件的props里面
const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

// 将仓库的dispatch方法映射到组件的props里面
const mapDispatchToProps = (dispatch) => {
  return {
    add(n) {
      dispatch({ type: "add", n });
    },
    minus() {
      dispatch({ type: "minus" });
    },
  };
};

class App extends Component {
  render() {
    // return (
    //   <>
    //     <h2>react结合redux</h2>
    //     <button>-</button>
    //     <span>{store.getState().count}</span>
    //     <button onClick={() => store.dispatch({ type: "add" })}>+</button>
    //   </>
    // );

    console.log(this.props);

    return (
      <>
        <h2>react结合redux</h2>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.count}</span>
        <button onClick={() => this.props.add(2)}>+2</button>
        <button onClick={() => this.props.add(3)}>+3</button>
      </>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
// export default connect(
//   (state) => {
//     return {
//       count: state.count,
//     };
//   },
//   (dispatch) => {
//     return {
//       add(n) {
//         dispatch({ type: "add", n });
//       },
//       minus() {
//         dispatch({ type: "minus" });
//       },
//     };
//   }
// )(App);
